<template>
  <el-container class="tab-container">
    <el-main class="main">
      <collapse-tab ref="searchArea" class="main-search">
        <el-form
          :inline="true"
          :model="queryCondition"
          label-width="80px"
          @keyup.enter.native="query"
        >
          <!--查询条件区 -->
          <el-form-item label="标题">
            <p-input v-model="queryCondition.title" class="form-item" />
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker
              v-model="queryCondition.publishTimeBeginFQ"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              align="right"
              unlink-panels
              placeholder="开始日期"
              class="form-item"
            />
          </el-form-item>

          <el-form-item label="至">
            <el-date-picker
              v-model="queryCondition.publishTimeEndFQ"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              align="right"
              unlink-panels
              placeholder="结束日期"
              class="form-item"
            />
          </el-form-item>
          <el-form-item label="重要">
            <dictionary-select
              v-model="queryCondition.importantFlag"
              multiple
              :code="constant.DICTIONARY_TYPE_CODES.YES_OR_NO"
              class="form-item"
            />
          </el-form-item>
          <el-form-item label="置顶">
            <dictionary-select
              v-model="queryCondition.topFlag"
              multiple
              :code="constant.DICTIONARY_TYPE_CODES.YES_OR_NO"
              class="form-item"
            />
          </el-form-item>

          <el-form-item style="float:right;">
            <list-button-query :page-code="pageCode" />
          </el-form-item>
          <div class="clearfix" />
        </el-form>
      </collapse-tab>
      <el-card class="main-report">
        <div style="margin-top:5px;">
          <el-row>
            <ul style="margin:0px;padding:0px">
              <li
                v-for="item in tableData"
                :key="item.id"
                style="line-height:30px;border-bottom: 1px dashed;width:100%;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;"
              >
                <el-tag v-if="item.topFlag === constant.YES_OR_NO.YES" type="danger" size="mini">置顶</el-tag>
                <el-tag
                  v-if="item.importantFlag === constant.YES_OR_NO.YES"
                  type="warning"
                  size="mini"
                >重要</el-tag>
                <a :title="item.title" @click="customView(item.id)">
                  <span>&nbsp;&nbsp;{{ item.title }}</span>
                  <span>({{ dateFormatter.formatUTCDate(item.publishTime) }})</span>
                </a>
              </li>
            </ul>
          </el-row>
          <list-pager
            :page-num="pageInfo.pageNum"
            :page-size="pageInfo.pageSize"
            :page-total="pageTotal"
          />
        </div>
      </el-card>

      <notice-viewer ref="noticeViewer" />
    </el-main>
  </el-container>
</template>

<script>
import { listMixin } from '@/mixin/listMixin'

import NoticeViewer from '@/modules/support/view/notice/view'
const MODULE_CODE = 'support'
const ENTITY_TYPE = 'notice'
export default {
  name: 'noticeViewList',
  components: { NoticeViewer },
  mixins: [listMixin],
  data() {
    return {
      entityType: ENTITY_TYPE,
      moduleCode: MODULE_CODE,
      // eslint-disable-next-line no-eval
      api: eval('this.$api.' + MODULE_CODE + '.' + ENTITY_TYPE),
      pageCode: MODULE_CODE + ':' + ENTITY_TYPE + ':',
      sortInfo: {
        sort_field: 'publishTime',
        sort_sortType: 'descending'
      },
      queryCondition: {}
    }
  },
  mounted() {
    this.$refs.searchArea.toggleTab()
    this.loadCustomData()
  },
  methods: {
    // 获取自定义
    loadCustomData() {
      this.loading = true
      const params = Object.assign(this.queryCondition, this.pageInfo, this.sortInfo)
      this.api.viewList(params)
        .then(res => {
          this.tableData = res.data.records
          this.pageTotal = res.data.total
        }).finally(() => {
          this.loading = false
        })
    },

    customView(id) {
      this.$refs.noticeViewer.show(id)
    }

  }
}
</script>

<style lang="scss" scoped>
.tab-container {
  $item-width: 200px;
  padding: 15px;
  .aside {
    min-width: 180px;
    background-color: white;
  }
  .main {
    .main-search {
      .form-item {
        width: $item-width;
      }
    }
    .main-report {
      margin-top: 10px;
    }
  }
}
</style>
